<template>
  <div class="addDialog">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name"></a-input>
      </a-form-model-item>
      <a-form-model-item label="环境类型" prop="env">
        <a-select
          style="width: 100%"
          v-model="form.env"
        >
          <a-select-option v-for="type in envTypeList" :key="type">
            {{type}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: 'addDialog',
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        name: '',
        env: ''
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        env: [{ required: true, message: '请选择环境', trigger: 'change' }]
      },
      envTypeList: ['开发', '测试']
    }
  },
  methods: {
    submit () {
      let isValid
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
.addDialog{

}
</style>
